<template>
  <div>
    <div class="navbar" :class="{ 'navbar-fixed': isNavbarFixed }">
      <el-menu :router="true" mode="horizontal">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/products">产品介绍</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
        <el-menu-item index="/contact">联系方式</el-menu-item>
      </el-menu>
    </div>
    
    
   <el-carousel indicator-position="outside" arrow="always">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <img :src="item.imageUrl" alt="carousel image" style="width:100%; height:500px;">
      </el-carousel-item>
    </el-carousel>
    
    <div class="product-grid">
      <div class="product-item" v-for="product in products" :key="product.id" @mouseover="showShadow" @mouseleave="hideShadow">
        <img src="../assets/img/bantou.png" alt="product image">
        <div class="product-overlay">
          <h3>{{ product.name }}</h3>
          <p>{{ product.description }}</p>
        </div>
      </div>
    </div>
    
    
    <div class="footer">
      <p>公司信息：XXX公司，地址：XXXXX，电话：123-456-7890，邮箱：info@example.com</p>
      <p>版权所有 © 2024</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isNavbarFixed: false,
      carouselItems: [
        { id: 1, imageUrl: '../assets/img/bantou1.png' },
        { id: 2, imageUrl: '../assets/img/bantou2.png' },
        { id: 3, imageUrl: '../assets/img/bantou3.png' },
        { id: 4, imageUrl: '../assets/img/bantou.png' }
      ],
      products: [
        { id: 1, name: '产品1', imageUrl: 'product1.jpg', description: '产品1介绍' },
        { id: 2, name: '产品2', imageUrl: 'product2.jpg', description: '产品2介绍' },
        { id: 3, name: '产品3', imageUrl: 'product3.jpg', description: '产品3介绍' },
        { id: 4, name: '产品4', imageUrl: 'product4.jpg', description: '产品4介绍' },
        { id: 5, name: '产品5', imageUrl: 'product5.jpg', description: '产品5介绍' },
        { id: 6, name: '产品6', imageUrl: 'product6.jpg', description: '产品6介绍' },
        { id: 7, name: '产品7', imageUrl: 'product7.jpg', description: '产品7介绍' },
        { id: 8, name: '产品8', imageUrl: 'product8.jpg', description: '产品8介绍' }
      ]
    };
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isNavbarFixed = window.pageYOffset > 0;
    }
  }
};
</script>

<style>
.content {
  max-width: 1200px; /* 设置最大宽度，可根据需要调整 */
  margin: 0 auto; /* 居中显示 */
  padding: 20px; /* 可根据需要调整内边距 */
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  justify-items: center;
  /* @media (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  } */
}
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

.product-item {
  position: relative;
  overflow: hidden;
}

.product-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s;
}
.product-item:hover img {
  transform: scale(1.1);
}

.product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  color: #fff;
  transition: opacity 0.3s;
  opacity: 0;
}

.product-item:hover .product-overlay {
  opacity: 1;
}
.product-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.footer {
  text-align: center;
  margin-top: 20px;
}
</style>
